<template>
<section>
  <el-col :span="24" style="padding-top:10px;padding-bottom:10px;">
            <el-button round type="primary" @click="addDialogFormVisible = true"  size="small" icon="el-icon-plus">新增退库</el-button> 
             <!-- <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['far','edit']"/></i>&nbsp;批量操作
                </el-button>
                <el-dropdown-menu slot="dropdown"> 
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> -->
            <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['fas','sign-out-alt']"/></i>&nbsp;导出
                </el-button>
        </el-col>
     <el-table
      v-loading="listLoading"
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="rowClick"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection">
      </el-table-column> 
      <el-table-column
        prop="outId"
        label="退库编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="assignAreaName"
        label="退库后存放区域"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storePlace"
        label="退库后存放地点"
        width="180">
      </el-table-column> 
      <el-table-column
        prop="operatorName"
        label="经办人"
        width="120">
      </el-table-column> 
      <el-table-column
        prop="outAssignTime"
        width="120px"
        label="退库时间">
      </el-table-column>
      <el-table-column
        prop="assetList"
        fix
        label="退库资产">
        <template slot-scope="props">
          <el-button type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
  </el-table>
   <el-col :span="24" class="toolbar">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
        </el-pagination>
    </el-col>

    <el-dialog title="新增退库" :visible.sync="addDialogFormVisible"  @open="dialogOpen" @close="resetForm('addForm')">
            <el-form :model="addForm" size="small" label-position="right" ref="addForm" label-width="120px">
                <el-row :gutter="10"> 
                    <el-col :span="8">
                    <el-form-item label="经办人" prop="operatorName" >
                        <el-input placeholder="请选择" disabled v-model="user.userName">
                        </el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="退库时间" prop="outDate">
                         <el-date-picker
                            :disabled="showDetail"
                            v-model="addForm.outDate"
                            type="date"
                            format="yyyy-MM-dd HH:mm:ss" 
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                            </el-date-picker>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="退库后使用公司" prop="company">
                         <el-cascader   
                            :disabled="showDetail"
                            :options="companyList"
                            change-on-select
                            v-model="addForm.company" 
                            :props="classifyProps">
                        </el-cascader>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="领用后存放区域" prop="area">
                        <el-select  :disabled="showDetail" v-model="addForm.area" filterable placeholder="请选择">
                            <el-option
                            v-for="item in areaList"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="存放地点" prop="place">
                        <el-input 
                            :disabled="showDetail" v-model="addForm.place"></el-input>
                    </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                    <el-form-item label="备注" prop="note"> 
                        <el-input
                            :disabled="showDetail"
                                type="textarea"
                                :rows="2"
                                placeholder="请输入备注"
                                v-model="addForm.note">
                                </el-input>
                    </el-form-item>
                    </el-col>
                    
                        <el-col v-show="!showDetail" :span="24" style="margin-bottom:10px;">
                            <el-button round type="primary" @click="selectAsset(true)" size="small" icon="el-icon-plus">选择资产</el-button> 
                            <el-button round  @click="removeAsset" size="small" class="el-icon-delete"> 移 除</el-button> 
                        </el-col>
                     
                     <el-table
                        v-loading="listLoading"
                        border
                        ref="multipleTable"
                        :data="selectAssets"
                        tooltip-effect="dark"
                        style="width: 100%;"
                        @selection-change="itemSelectionChange">
                        <el-table-column
                        type="selection">
                        </el-table-column>
                        <el-table-column 
                        prop="assetName"
                        label="名称"
                        width="120"
                        show-overflow-tooltip>
                        </el-table-column> 
                        <el-table-column
                        prop="assetNum"
                        label="编号"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="standardName"
                        label="规格"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                        prop="unitPrice"
                        label="单价"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                        prop="belongName"
                        label="所属公司"
                        width="120"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                        prop="assetAdmin"
                        label="管理员"
                        show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                        prop="crateTime"
                        label="入库时间"
                        width="120"
                        show-overflow-tooltip>
                        </el-table-column>
                    </el-table> 
                </el-row> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-show="!showDetail" @click="submitForm('addForm')">确 定</el-button>
            </div>
        </el-dialog>       

         <el-dialog title="选择资产" :visible.sync="isAssetDialogShow" @close="selectAsset(false)">
            <section>
                <AssetsTable ref="assetDialogss"></AssetsTable>
            </section>
            <div slot="footer" class="dialog-footer">
                <el-button @click="selectAsset(false)">取 消</el-button> 
                <el-button type="primary" @click="selectAsset(false)">确 定</el-button> 
            </div>
        </el-dialog> 
</section>
   
</template>

<script>
import {formatDate} from '@/common/DateUtil.js';
import api from "@/service/api";
import http from "@/service/http";
import store from "@/store";
import { mapActions, mapGetters } from "vuex";
import AssetsTable from "@/views/system/staticassets/assets/AssetsTable";
export default {
  components: { AssetsTable },
  data() {
    return {
      user: {},
      addDialogFormVisible: false,
      listLoading: false,
      pageSize: 20,
      totalNum: 0,
      currentPage: 1,
      tableData: [],
      companyList: [],
      areaList: [],
      mult: [],
      addForm: {
        area: "",
        place: "",
        note: "",
        company: [],
        outDate: new Date()
      },
      classifyProps: {
        label: "name",
        value: "id",
        children: "child",
        disabled: "disabled"
      },
      showDetail:false
    };
  },
  computed: {
    //导入store的getters属性
    ...mapGetters({
      selectAssets: "system/asset/selects",
      isAssetDialogShow: "system/asset/isDialogShow"
    })
  },
  methods: {
    //导入actions方法
    ...mapActions({
      assetShowDialog: "system/asset/showDialog",
      assetSelectionChange: "system/asset/handleSelectionChange",
      assetToSelect: "system/asset/toSelect",
      searchAssets: "system/asset/searchAssets",
      toUsingSelect: "system/asset/toUsingSelect"
    }),
    rowClick(row) {  
      this.showDetail = true;
      this.assetSelectionChange(row.assetList);
      this.addForm.area = row.assignAreaName;
      this.addForm.place = row.storePlace;
      this.addForm.note = row.note;
      this.user.userName = row.operatorName;
      this.addForm.company = row.companyIds;
      this.addDialogFormVisible = true;
    },
    dialogOpen() {
      this.getCompanyList();
      if(this.showDetail){
        return;
      }else{
        this.user = JSON.parse(localStorage.getItem("user"));
      }
      this.getAreaList();
      this.toUsingSelect(true);
      this.assetSelectionChange([]);
      this.searchAssets();
    },
    submitForm(val) {
      let param = {
        outAssignTime: formatDate(new Date(this.addForm.outDate), "yyyy-MM-dd hh:mm:ss"),
        operatorId:this.user.id,
        companyId:this.addForm.company[this.addForm.company.length-1],
        outAreaId:this.addForm.area,
        outStorePlcae:this.addForm.place,
        note:this.addForm.note,
        assetIds:[]
      };
      this.selectAssets.forEach(function(item) {
          param.assetIds.push(item.id);
      })
      http.post(api.sysApi.addOutAssign, param).then(data => {
        if(!data.success){
				return;
			}
        this.$message({
          message: "退库成功",
          type: "success"
        });
        this.addDialogFormVisible = false;
        this.toUsingSelect(false);
        this.getOutboundList();
      });
    },
    resetForm(val) {
      this.$refs[val].resetFields();
      this.showDetail = false;
      this.toUsingSelect(false);
    },
    handleSelectionChange(val) {
      console.log(`val`);
    },
    //选择资产
    selectAsset(val) {
      this.assetShowDialog(val);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOutboundList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getOutboundList();
    },
    //选择已选择的资产
    itemSelectionChange(val) {
      this.mult = val;
    },
    //获取区域
    getAreaList() {
      let param = { pageNum: 1, pageSize: 200 };
      http.post(api.sysApi.getAreaList, param).then(data => {
        this.areaList = data.data;
      });
    },
    //获取公司
    getCompanyList() {
      http.post(api.sysApi.getCompanyList, "").then(data => {
        this.companyList = data.data;
      });
    },
    //移除选择的资产
    removeAsset() {
      var me = this;
      if (this.mult.length == 0) {
        this.$alert("请选择要移除资产");
        return;
      }
      let temp = [];
      let temp2 = me.selectAssets;
      let tempI = [];
      this.mult.forEach(function(item1) {
        temp2.splice(temp2.findIndex(item => item.id == item1.id), 1);
      });
      this.$refs.assetDialogss.setSelection(temp2);
    },
    getOutboundList() {
      this.listLoading = true;
      var search = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        codeDel: 0
      };
      http.post(api.sysApi.selectOutAssignList, search).then(data => {
        this.tableData = data.data;
        this.totalNum = data.totalNum;
        this.listLoading = false;
      });
    }
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.getOutboundList();
  }
};
</script>

<style>
.el-pagination {
  float: right;
}
</style>
